<template>
  <van-tabs v-model="active">
    <van-tab title="音频" />
    <van-tab title="视频" />
  </van-tabs>
  <van-icon name="arrow-left" class="back" size="20px" @click="onback" />
  <!-- 路由切换 -->
  <router-view />
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const active = ref(0);
    const router = useRouter();
    // const route = useRoute();
    const onback = () => {
      router.back();
    };
    return {
      active,
      onback,
    };
  },
};
</script>

<style lang="less" scoped>
.back {
  position: fixed;
  top: 22px;
  transform: translate(12px, -50%);
  z-index: 1001;
}

.van-tabs {
  position: fixed;
  z-index: 999;
  top: 0%;
  left: 0%;
  width: 100%;
  background: #fff;
  /deep/.van-tabs__nav {
    margin: 0 100px;
    .van-tab {
      color: #a3a3a3;
      font-size: 16px;
      font-weight: 600;
    }
    .van-tab--active {
      color: #000;
    }
    .van-tabs__line {
      width: 20px;
      height: 4px;
      background: #f3d24a;
    }
  }
}
</style>
